<template>
  <div class="user-list">
    <div id="myDIV">
        <waterfall
          :line-gap="250"
          :max-line-gap="360"
          :min-line-gap="260"
          :fixed-height="true"
          :watch="items"
           align="center"
          >
            <!-- each component is wrapped by a waterfall slot -->
            <waterfall-slot
                    v-for="(item, index) in items"
                    :width="250"
                    :height="260"
                    :order="index"
                    :key="item.id"
            >
                <v-billcomp
                  :item="item"
                  :index="index"
                  class="item"
                  :backSelectItems="selectItems"
                  :backItems="getCurrentSelectItems"
                  :isGoods="isGoods"
                  :isMutpart = "true"
                  :currentRadio ="currentRadio"
                  :viewClick="function(){info(item)}"
                  :buttonText="buttonText"
                  >
                  <div class="text">

                    <h6 class="l1">{{item.name}}</h6>
                    <p><small class="span2">数量</small>{{item.quantity}}</P>
                    <p class="l1"><small class="span2">原价</small>{{ Number(item.goodsprice || 0).toFixed(2) }}</p>
                    <p><small class="span2">会员价</small>{{ Number(item.memberPrice || 0).toFixed(2) }}</p>
                    <p><small class="span2">总价</small>{{ Number(item.amount || 0).toFixed(2) }}</p>
                    <p>{{item.create_time}}</p>
                  </div>
                </v-billcomp>
            </waterfall-slot>
        </waterfall>
    </div>
    <div v-if="this.showTip" style="text-align: center">
      暂无挂单结算商品
    </div>
  </div>
</template>
<script>
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import vBillcomp from '../../common/BillComp.vue';
    import vSimpsearch from '../SimpSearch.vue';
    import moment from 'moment';
    import * as type from '../../../store/types';
    export default {
        name: 'keepAlive',
        components: {
            vBillcomp, Waterfall, WaterfallSlot, vSimpsearch
        },
        props: {
            param: '',
            backInfo:''
        },
        data: function () {
            return {
                currentRadio:{index:-1},
                loading: false,
                allItems: [],
                selectItems: [],
                items: [],
                rows: 20,//显示数量
                page: 1,//当前页数
                totalPage: 1,//总页数
                userItem: [],
                isGoods: true,
                isMultiselect: false,
                list: [],
                showTip:false,
                buttonText: '查看',
            }
        },
        mounted: function () {
          console.log("=============>mounted")
          this.loadMore();
            this.$$("#content").scrollTop(0)
          let self = this;
          this.$$("#content").on('scroll', function (e) {
              var scrollTop = self.$$("#content").scrollTop();
              var innerHeight = self.$$("#content").innerHeight();
              var scrollHeight = self.$$("#content").scrollHeight();
              if (scrollTop + innerHeight >= scrollHeight) {
                  self.page++;
                  if (self.page > self.totalPage) {
                      return;
                  }
                  self.loadMore();
                  console.log('*(******************' + self.page)
              }
          });

          document.getElementById("myDIV").addEventListener('wheel', function (e) {
              if (e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0) {
                  console.log(e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0)
                  self.page++;
                  self.loadMore();
              }
          });
        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loadMore();
            }
        },
        methods: {
            getNum:function (res) {
                this.list=res;
                console.log(this.list);

            },
            loadMore: function () {
              console.log("==============>loadMore");
                this.id = this.$route.params.item.id;
                if(this.id == undefined){
                  this.id = "";
                }
                console.log(this.$route)
                let self = this;
                if (this.page <= this.totalPage) {
                    self.loading = true;
                    this.$axioxs.get("/sale/sn/" + this.id + "?param=" + this.param + "&rows=" + this.rows + "&page=" + this.page)
                        .then(function (res) {
                          console.log(res)
                          self.totalPage = res.data.totalPage;
                          self.allItems = res.data.records;
                          if(self.allItems.length<1){
                              self.showTip=true;
                          }else{
                              self.showTip=false;
                          }
                          self.allItems.forEach(item => {
                              item.height = 265;
                              item.width = 300;
                              item.create_time = moment(item.create_time).format("YYYY-MM-DD")
                              self.items.push(item);
                          });
                            self.loading = false;
                        })
                        .catch(function (error) {
                          console.log(error);
                          self.$message({
                              showClose: true,
                              type: 'error',
                              message: error,
                              onClose:function () {
                                self.loading = false;
                              }
                          });
                        });
                }
            },
            getCurrentSelectItems: function (items) {
                console.log("==================>")
                console.log(items);



                this.$emit('transferGoodItem', items)
                // alert(JSON.stringify(items.length))
            },
            getParam(res){
                this.param = res;
            },
            info: function (item) {
//                let hasRights = this.currentUser.rights.find(obj=> obj === 'library_buy_edit')
//                if(hasRights != 'library_buy_edit'){
//                    this.$message({
//                        showClose: true,
//                        message: '权限不足',
//                        type: 'warning'
//                    });
//                    return;
//                }
                console.log(item)
                this.$store.commit(type.CHANGE_INDEX, '/billList');
                var backItem = this.$route.params;
                this.$router.push({
                    name: 'billlist',
                    path: '/billList',
                    params: {
                        item: item,
                        backItem: backItem.item,
                        id: backItem.id,
                        name: backItem.name,
                        memberId: backItem.memberId,
                        isPayState: backItem.isPayState,
                        sn: backItem.sn,
                    }

                });
            },
        },

    }

</script>

<style scoped>
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }
    .simple-search .el-input__inner{
      border-radius: 20px;
    }
    .search-part{
      width: 100%;
    }
    .w-user{
      margin: 0px 20px;
      background-color: #fff;
    }

    .search-layout{
      padding: 10px;
      background-color: #fff;
    }
    .text{
      margin-bottom: 1em;
    }

    .text h6{
      margin-bottom: 5px;
    }
    .text p{
      margin: .2em 0;
    }

    .span1{
      background-color: #3eb3f9;
      border-radius: 20px;
      padding: 2px 5px;
      color: #fff!important;
      font-size: .8em;
      margin-right: 3px;
    }
    .span2{
      background-color: #6699ff;
      border-radius: 20px;
      padding: 2px 5px;
      color: #fff!important;
      font-size: .8em;
      margin-right: 3px;
    }
    .remark{
      padding: 3px 0;
    }
</style>
